<template>
	<view class="components">
		<nav-bar :isBack="true" title="插件" background="#fff"></nav-bar>
		<view class="components-list">
			<view class="comp" v-for="(item,index) in compList" :key="index">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				compList: [
					{name: '骨架屏',url: ''},
					{name: '图片裁剪',url: ''}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
	.components {
		width: 100%;
		min-height: 100%;
		background-color: #E6E6E6;
		.components-list {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			.comp {
				width: 100%;
				height: 80rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				padding-left: 20rpx;
				margin-bottom: 20rpx;
				background-color: #FFFFFF;
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
				color: #333333;
				font-size: 26rpx;
			}
		}
	}

</style>
